/* 初试化 css 样式 */

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, legend, button form, fieldset, input, textarea, p, blockquote, th, td {
    padding: 0;
    margin: 0;
}
li {
    list-style: none;
}
/* 让父元素 占满 一个屏幕 */

html, body {
    width: 100%;
    height: 100%;
}

/* 让整个页面 是 #eee 颜色 */

#app {
    width: 100%;
    height: 100%;
    background-color: #eee;
}

/* header 头部区域 */

header {
    width: 100%;
    height: 100px;
}

.site-topbar {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #333;
}

.container {
    width: 1226px;
    height: 100%;
    margin: 0 auto;
}

.site-topbar .sep {
    margin: 0.25em;
    color: #424242;
}

.topbar-nav {
    float: left;
    font-size: 12px;
    color: #B0B0B0;
}

/* 设置 a 标签的高度  */

.topbar-nav a {
    display: inline-block;
    height: 40px;
    color: #B0B0B0;
    text-decoration: none;
}

.topbar-nav a:hover {
    color: #fff;
}

.topbar-cart {
    width: 100px;
    height: 40px;
    float: right;
    background-color: pink;
}

/* 子绝父相 */

.show-applogo {
    position: relative;
}

/* 使用伪元素 画一个 三角形，并让display：none，不显示，鼠标移动到字体的时候在显示 */

.show-applogo::before {
    content: "a";
    position: absolute;
    bottom: 0px;
    transform: translateX(50%);
    width: 0px;
    height: 0px;
    display: none;
    background-color: #fff;
    overflow: hidden;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #fff;
    background-color: #333;
    /* background-image: url('../../assets/logo.png');
    background-repeat: no-repeat;
    background-size: cover; */
}

.show-applogo:hover .applogo {
    height: 150px;
}

/* 使用 transition 简单控制 伪元素动画  伪元素必须紧跟hover*/

.show-applogo:hover::before {
    display: inline;
}

/* transition: 允许CSS属性值在一定的时间区间内平滑的过渡，
    transition加在 需要动画的上面，：hover 后面是需要过度的属性。
*/
/* 让box-shadow 左右下有阴影 0 1px 5px */
.applogo {
    position: absolute;
    top: 40px;
    transform: translateX(-80px);
    width: 120px;
    height: 0px;
    box-shadow: 0 1px 5px #aaa;
    color: #333;
    overflow: hidden;
    background-color: #fff;
    transition: height .3s;
}

.tobar-info {
    width: 100px;
    height: 40px;
    line-height: 40px;
    float: right;
    background-color: purple;
}

/* 头部信息  下半部分 */
.site-header {
    height: 100px;
    background-color:#ccc;
}
.header-logo {
    width: 62px;
    margin-top: 22px;
    float: left;
}
/* 使用 after 伪元素 添加图片 */
.logo::after {
    content: '';
    width: 50px;
    height: 50px;
    border-radius: 30px;
    display: inline-block;
    background-image: url('../../assets/logo.png');
    background-size: cover;
    background-color: pink;
    transition: margin-left .1s;
}

.logo:hover::after {
    margin-left: 2px;
}
.header-nav {
    width: 850px;
    height: 100px;
    line-height: 100px;
    float: left;
    background-color: yellow;
}
.nav-category {
    width: 120px;
    height: 100px;
    background-color: #fff;
}
.nav-list {
    font-size: 16px;
}
.nav-item {
    float: left;
    position: relative;
    padding:0 10px;
}
.nav-item:hover {
    color: orange;
}
.nav-item-content {
    position: absolute;
    width: 100%;
    height: 100px;
    background-color: #fff;
}